/**
 * @name 顶部右上角信息
 * @author wxd
 * @description
 */

import React, { Component } from 'react'

import { Icon, Tooltip, Badge, Popover } from 'antd'
import styles from './styles.module.less'

const userImg = require('./img/antuser.png')
class RightTopHead extends Component {
  render() {
    return (
      <div className={styles.topContainer}>
        <span className={styles.spans}>
          <Tooltip title="使用文档" placement="bottom">
            <Icon type="question-circle" style={{ fontSize: '18px' }} />
          </Tooltip>
        </span>
        <span className={styles.spans}>
          <Badge count={12} overflowCount={99}>
            <Icon type="bell" style={{ fontSize: '18px' }} />
          </Badge>
        </span>
        <span className={styles.spans}>
          <Popover content={contents} className={styles.propdiv}>
            <img src={userImg} alt="用户头像" className={styles.userImg} />
            <span className={styles.userName}>用户姓名</span>
          </Popover>
        </span>
      </div>
    )
  }
}

/**
 * @module 气泡卡片
 * @description 个人中心，个人设置，退出登录
 */
const userList = [
  { title: '个人中心', path: '', icon: 'user' },
  { title: '个人设置', path: '', icon: 'setting' },
  { title: '退出登录', path: '', icon: 'logout' },
]
const contents = (
  <div className={styles.propdiv}>
    {userList.map(item => (
      <p key={item.icon} className={styles.provp}>
        <Icon type={item.icon} /> {item.title}
      </p>
    ))}
  </div>
)
export default RightTopHead
